@use '@scss/common.scss' as *;

.reTriggerBackground {
  display: flex;
  gap: 1.5rem;

  @include small-break {
    gap: 1rem;
    flex-direction: column-reverse;
  }
}

.deployDetails {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  p {
    margin: 0;
  }

  .iconAndLabel {
    @include small;
    & {
      display: flex;
      align-items: center;
      color: var(--theme-elevation-500);
    }

    svg {
      color: var(--theme-elevation-400);
      height: 20px;
      margin-right: 0.5rem;
    }
  }
}

.indicationLine {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  p {
    margin: 0;
    color: var(--theme-elevation-450);
  }
}

.statusLine {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  p {
    font-size: 0.75rem;
    margin: 0;
    color: var(--theme-elevation-450);

    b {
      color: var(--theme-text);
    }
  }
}

.progressBar {
  width: 100%;
  position: relative;
  height: 5px;
  background-color: var(--theme-border-color);
  border-radius: 3px;

  &:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--theme-success-450);
    position: absolute;
    top: 0;
    left: 0;
    transition: 300ms ease;
    border-radius: 3px;
  }
  &.step--0 {
    &:after {
      width: 2%;
    }
  }
  &.step--1 {
    &:after {
      width: 25%;
    }
  }
  &.step--2 {
    &:after {
      width: 50%;
    }
  }
  &.step--3 {
    &:after {
      width: 75%;
    }
  }
  &.step--4 {
    &:after {
      width: 100%;
    }
  }

  &.status--error {
    &:after {
      background-color: var(--theme-error-500);
    }
  }
  &.status--warning {
    &:after {
      background-color: var(--theme-warning-500);
    }
  }

  &.status--suspended {
    &:after {
      background-color: var(--theme-elevation-300);
    }
  }
}

.consoleHeading {
  padding-top: 2rem;
}

.console {
  code {
    background-color: unset;
    display: block;
  }
}

.tips {
  & > *:last-child {
    margin-bottom: 0;
  }
}

.helpText {
  color: var(--theme-elevation-450);

  code {
    color: var(--theme-elevation-800);
  }

  a {
    color: var(--theme-blue-500);
  }
}

.content {
  display: flex;
  flex-direction: column;
  gap: 2rem;

  @include mid-break {
    gap: 1rem;
  }
}

.indication {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  @include small-break {
    gap: 0.5rem;
  }
}
